<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="羊场全称">
      <el-input v-model="formInline.sheepFullName" placeholder="请输入羊场全称" />
    </el-form-item>
    <el-form-item label="羊场负责人">
      <el-input v-model="formInline.responsiblePerson" placeholder="请输入负责人" />
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="onSubmit()">查询</el-button>
      <el-button type="danger" @click="pishan()">批量删除</el-button>
      <el-button type="primary" @click="tian()">新增</el-button>
    </el-form-item>
  </el-form>

  <div>
    <div class="app-container">
      <div class="search-container">
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="sheepNumber" label="羊场编码" />
          <el-table-column prop="sheepFullName" label="羊场全称" />
          <el-table-column prop="sheepAbbreviation" label="羊场简称" />
          <el-table-column prop="sheepScale" label="羊场规模" />
          <el-table-column prop="sheepAddr" label="羊场地址" />
          <el-table-column prop="address" label="详细地址" />
          <el-table-column prop="responsiblePerson" label="负责人" />
          <el-table-column fixed="right" label="操作" min-width="60">
            <template #default="scope">
              <el-button type="primary" link @click="handleDelete(scope.row.sheepId)">
                删除
              </el-button>
              <el-button type="primary" link @click="Updae(scope.row)">
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
    :page-sizes="[1, 2, 3, 4]" :background="true" layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <el-dialog v-model="dialogVisible" title="Tips" width="500">
    <span>羊场添加</span>

    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="羊场全称">
        <el-input v-model="form.sheepFullName" />
      </el-form-item>
      <el-form-item label="羊场简称">
        <el-input v-model="form.sheepAbbreviation" />
      </el-form-item>
      <el-form-item label="羊场规模">
        <el-select v-model="form.sheepScale" placeholder="请选择" clearable>
          <el-option label="100-200只" value="100-200只" />
          <el-option label="200-300只" value="200-300只" />
          <el-option label="300-400只" value="300-400只" />
        </el-select>
      </el-form-item>
      <el-form-item label="羊场地址">
        <el-input v-model="form.sheepAddr" />
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="form.responsiblePerson" />
      </el-form-item>
      <el-form-item label="管理部门">
        <el-select v-model="form.departId" placeholder="请选择" clearable>
          <el-option label="生产管理" value="1" />
          <el-option label="销售管理" value="2" />
          <el-option label="财务管理" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="form.state">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button @click="AddSheep()">添加</el-button>
    </el-form>
  </el-dialog>

  <el-dialog v-model="updates" title="Tips" width="500">
    <span>羊场修改</span>

    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="羊场全称">
        <el-input v-model="form.sheepFullName" />
      </el-form-item>
      <el-form-item label="羊场简称">
        <el-input v-model="form.sheepAbbreviation" />
      </el-form-item>
      <el-form-item label="羊场规模">
        <el-select v-model="form.sheepScale" placeholder="请选择" clearable>
          <el-option label="100-200只" value="100-200只" />
          <el-option label="200-300只" value="200-300只" />
          <el-option label="300-400只" value="300-400只" />
        </el-select>
      </el-form-item>
      <el-form-item label="羊场地址">
        <el-input v-model="form.sheepAddr" />
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="form.responsiblePerson" />
      </el-form-item>
      <el-form-item label="管理部门">
        <el-select v-model="form.departId" placeholder="请选择" clearable>
          <el-option label="生产管理" value="1" />
          <el-option label="销售管理" value="2" />
          <el-option label="财务管理" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="form.state">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button @click="Upwd()">修改</el-button>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
//引用
import { ref, onMounted, reactive } from "vue";
import PurchaseAPI from "@/api/OrganizationalAdministration/index";
import vendor, {
  organQuery,
  AddSheepFactory,
} from "../../../api/OrganizationalAdministration/index";

import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
import AddSupplier from "./addSupplier.vue";
import { useRouter } from "vue-router";

//查询条件
const formInline = reactive<organQuery>({
  pageIndex: 1,
  pageSize: 2,
  sheepId: 0,
  sheepFullName: "",
  responsiblePerson: "",
});
const form = reactive<AddSheepFactory>({
  sheepId: 0,
  sheepFullName: "",
  sheepAbbreviation: "",
  sheepScale: "",
  sheepAddr: "",
  address: "",
  responsiblePerson: "",
  departId: 1,
  state: 0,
  isdelete: 0,
});

const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  onSubmit();
};
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  onSubmit();
};

//分页条件
const page = reactive({
  totalCount: 0,
  pageCount: 0,
});

onMounted(() => {
  onSubmit();
  SheepType();
});

const tableData = ref([]);

//显示列表
const onSubmit = () => {
  console.log(formInline);
  console.log(page);
  vendor
    .getSheepFacroryList(formInline)

    .then((res: any): any => {
      tableData.value = res.data.data;
      page.totalCount = res.data.totalCount;
      page.pageCount = res.data.pageCount;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

const handleDelete = (sheepId: number) => {
  const ids = [sheepId];
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      vendor.DeleteSheepFactory(ids).then((res: any) => {
        if (res.code > 0) {
          ElMessage.success("删除成功");
          onSubmit();
        } else {
          ElMessage.error("删除失败");
          onSubmit();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const idList = ref([]);

const handleSelectionChange = (val: any) => {
  val.forEach((item) => {
    idList.value.push(item.sheepId);
  });
  console.log(idList);
};

const pishan = () => {
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      vendor.DeleteSheepFactory(idList.value).then((res: any) => {
        if (res.code > 0) {
          ElMessage.success("删除成功");
          onSubmit();
        } else {
          ElMessage.error("删除失败");
          onSubmit();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

const types = ref([]);
const SheepType = () => {
  vendor
    .SheepType()

    .then((res: any) => {
      types.value = res.data;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

//弹框
const dialogVisible = ref(false);
const updates = ref(false);
const tian = () => {
  dialogVisible.value = true;
};

const AddSheep = () => {
  vendor
    .AddSheep(form)
    .then((res: any) => {
      if (res.code > 0) {
        ElMessage.success("添加成功");
        onSubmit();
      } else {
        ElMessage.error("添加失败");
        onSubmit();
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
};

const Updae = (data: any) => {
  form.sheepId = data.sheepId;
  form.sheepAddr = data.sheepAddr;
  form.sheepAbbreviation = data.sheepAbbreviation;
  form.sheepFullName = data.sheepFullName;
  form.sheepScale = data.sheepScale;
  form.address = data.address;
  form.responsiblePerson = data.responsiblePerson;
  form.state = data.state;
  form.isdelete = data.isdelete;
  updates.value = true;
};

const Upwd = () => {
  vendor
    .UpdateSheep(form)
    .then((res: any) => {
      if (res.code > 0) {
        ElMessage.success("修改成功");
      } else {
        ElMessage.error("修改失败");
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
};
</script>
